<template>
  <!-- http://192.168.0.12:8000/#/wel/index -->
  <div class="wel">
    <!-- wel 顶部 -->
    <div class="wel-top">
      <!-- zabbix 服务 -->
      <div class="zabbix left">
        <h1>zabbix 服务</h1>
        <div class="zabbix-table-wrap">
          <table class="el-table" style>
            <thead>
              <tr>
                <th>参数></th>
                <th>值</th>
                <th>细节</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="zbbix in zabbixList" :key="zbbix.item2">
                <td>{{zbbix.item0}}</td>
                <td>{{zbbix.item1}}</td>
                <td>{{zbbix.item2}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 总主机机 仪表盘-->
      <div class="center">
        <wel-top-gauge ref="welTopGauge"></wel-top-gauge>
      </div>

      <!-- 主机详细信息表格 -->
      <div class="total-host right">
        <h1>总主机信息</h1>
        <el-table :data="totalHostList">
          <el-table-column prop="type" label="类型"></el-table-column>
          <el-table-column prop="total" label="总的"></el-table-column>
          <el-table-column prop="used" label="已使用"></el-table-column>
          <el-table-column prop="unused" label="未使用"></el-table-column>
        </el-table>
      </div>
    </div>

    <!-- hadoop 主机 -->
    <div class="hadoop">
      <div class="hadoop-table">
        <table class="el-table">
          <caption>
            <h1>hadoop主机</h1>
          </caption>
          <thead>
            <tr>
              <th>hap主机</th>
              <th>主机ip</th>
              <th>CPU使用</th>
              <th>内存总量</th>
              <th>内存使用</th>
              <th>内存未用</th>
              <th>硬盘总量</th>
              <th>硬盘使用</th>
              <th>硬盘未用</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in hadoopList" :key="item.ip">
              <td>{{item.name}}</td>
              <td>{{item.ip}}</td>
              <td>{{item.cpu}}</td>
              <td>{{item.memtotal}}</td>
              <td>{{item.memuse}}</td>
              <td>{{item.memfree}}</td>
              <td>{{item.disktotal}}</td>
              <td>{{item.diskuse}}</td>
              <td>{{item.diskfree}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="hadoop-charts">
        <div id="hadoopCharts" style="height:210px; width:810px;"></div>
      </div>
    </div>

    <!-- 详细主机的 echart 图表 部分 -->
    <div class="wel-detail-host-wrap">
      <wel-detail-host></wel-detail-host>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import filters from "@/filters";
import { throws } from "assert";
import { constants } from "zlib";

import { getTotalHostList, getHadoopList, getZabbixList } from "@/api/wel.js";

import WelTopGauge from "./WelTopGauge.vue";
import WelDeatilHost from "./WelDetailHost";

export default {
  name: "wel",
  components: {
    "wel-top-gauge": WelTopGauge,
    "wel-detail-host": WelDeatilHost
  },
  data() {
    return {
      zabbixList: [],
      // 用来存放总的主机信息的
      totalHostList: [
        {
          type: "主机",
          total: 0,
          used: 0,
          unused: 0
        },
        {
          type: "硬盘",
          total: 0,
          used: 0,
          unused: 0
        },
        {
          type: "内存",
          total: 0,
          used: 0,
          unused: 0
        }
      ],
      // 存放 hadoop 主机表格列表
      hadoopList: [],
      // dadoop 主机echarts图表 配置选项
      hadoopChartsOption: {
        xAxis: {
          // type: 'category',
          data: ["cpu", "memory", "disk", "load"]
        },
        tooltip: {
          formatter: "{a}<br/>{b}: {c}%"
        },
        legend: {
          data: ["hap1", "hap2", "hap3", "hap4"]
          // top: 10
        },
        yAxis: {
          type: "value",
          name: "使用率(%)",
          date: [0, 20, 40, 60, 80, 100],
          splitLine: {
            // y轴坐标分割线
            show: false
          }
        },
        grid: {
          left: 40,
          right: 40,
          // top: 20,
          bottom: 20
        },
        // color: [
        //   "rgba(222, 94, 232, 1)",
        //   "rgba(79, 213, 91, 1)",
        //   "rgba(148, 104, 243, 1)",
        //   "rgba(0, 255, 64, 1)",
        //   "rgba(66, 162, 255, 1)"
        // ],
        series: [
          {
            name: "hap1",
            type: "bar",
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: "{c}%"
              }
            },
            data: [11, 95, 13, 58]
          }
        ]
      }
    };
  },
  computed: {},
  created() {
    this.request();
  },
  mounted() {},
  methods: {
    // 所有的请求，请求完了之后有echarts图表的就重新设置配置项
    request() {
      getZabbixList()
        .then(res => {
          if (res.status === 200) {
            this.zabbixList = res.data;
          }
        })
        .catch(err => {
          throw err;
        });

      // 得到总主机信息
      getTotalHostList()
        .then(response => {
          // 注意：执行读取文件是异步操作，
          // 有可能数据还没有读取出来， vue就已经挂载完了
          if (response.status === 200) {
            let obj = response.data;
            this.setTotalHostList(obj);
            let memoryRate = ((obj.memoryUsed / obj.memoryTotal) * 100).toFixed(2);
            let diskRate = ((obj.diskUsed / obj.diskTotal) * 100).toFixed(2);
            // 调用子组件的方法
            this.$refs.welTopGauge.drawChart(memoryRate, diskRate);
          }
        })
        .catch(err => {
          throw err;
        });
      // 得到 hadoop 主机列表，画 dadoop echarts图表
      getHadoopList()
        .then(res => {
          if (res.status === 200) {
            console.log(res.data);
            this.hadoopList = res.data;
            this.setHadoopChartsOption(res.data);
            this.drawChart("hadoopCharts");
          }
        })
        .catch(err => {
          throw err;
        });
      console.log("getHadoopList2");
    },

    // // 设置总主机表格信息的方法 getTotalList
    setTotalHostList(obj) {
      this.totalHostList[0].total = obj.serverNum;
      this.totalHostList[0].used = obj.serverNormalNum;
      this.totalHostList[0].unused = obj.serverAbnormalNum;

      this.totalHostList[1].total = obj.diskTotal;
      this.totalHostList[1].used = obj.diskUsed;
      this.totalHostList[1].unused = obj.diskUnused;

      this.totalHostList[2].total = obj.memoryTotal;
      this.totalHostList[2].used = obj.memoryUsed;
      this.totalHostList[2].unused = obj.memoryUnused;
    },
    // // 设置 hadoop 主机图表配置项
    setHadoopChartsOption(arr) {
      // cpu

      for (let i = 0; i < arr.length; i++) {
        // // 图例
        this.hadoopChartsOption.legend.data[i] = arr[i].name;
        this.hadoopChartsOption.series[i] = {
          name: arr[i].name,
          type: "bar",
          label: {
            normal: {
              show: true,
              position: "top",
              formatter: "{c}%"
            }
          },
          data: [
            parseFloat(arr[i].cpu),
            parseFloat(arr[i].mempfree),
            parseFloat(arr[i].diskpfree),
            parseFloat(arr[i].load)
          ]
        };
      }
      console.log("setHadoopChartsOption",arr)
    },
    // 画图表, 接收字符串dom元素
    drawChart(elStr) {
      this[elStr + "EchartsInstance"] = echarts.init(document.getElementById(elStr), "light");
      this[elStr + "EchartsInstance"].setOption(this[elStr + "Option"]);
    }
  }
};
</script>

<style lang="scss" scope>
// wel中一些公用的属性，在几个部分中都会用到的属性
.wel {
  border-radius: 10px;
  // background-image: url("../../static/img/bg/bg-wel-9.jpg");
  // background-color: #252c58;
  background-size: cover;
  h1 {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #476dbe;
  }
  // 整个wel中表格的一些公共属性
  .el-table {
    // 去掉整个表格最右边的的小横线
    background-color: rgba(192, 30, 30, 0);
    thead {
      color: #31c2aad5; // 表格 head部分 字体颜色
    }
    tbody {
      color: #4a8128; // 表格 body部分 字体颜色
    }
    tr,
    th {
      // 去element-ui 默认的背景颜色白色
      // 把有表格的地方的背景颜色改为透明的
      background-color: rgba(0, 0, 0, 0);
    }
    tr th,
    tr td {
      border-bottom: 1px solid;
      border-bottom-color: rgba(60, 160, 147, 0.24);
    }
  }
  .el-table::before {
    // 去掉整个表格最底部的的小横线
    background-color: rgba(0, 0, 0, 0);
  }
}
// wel 顶部
.wel-top {
  display: flex;
  flex-direction: row;
  border-radius: 5px;
  margin: 0 10px;
  padding: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.53);
  .left,
  .right {
    /*flex-grow 属性用于设置或检索弹性盒的扩展比率。*/
    flex-grow: 1;
    width: calc(50% - 220px);
  }
  .center {
    padding-top: 40px;
  }
  .zabbix {
    min-width: 410px;
    .zabbix-table-wrap {
      height: 200px;
      overflow: hidden;
    }
    .el-table {
      tr td,
      tr th {
        height: 23px;
        line-height: 23px;
        padding: 12px 0px;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      tr th {
        padding: 15px 0px;
      }
    }
  }
}

// hadoop 主机
.hadoop {
  // margin-top: -30px;
  // border-top: 5px solid;
  // border-top-color: rgba(30, 144, 255, .5)
  margin: 20px 10px;
  padding: 10px 0 10px 10px;
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.53);
  h1 {
    text-align: left;
  }
  .el-table tr td {
    padding: 5px 0px;
  }
  .hadoop-table {
    float: left;
    // 注意， 必须要有  - 号两边必须要有空格
    width: calc(100% - 810px);
  }
  .hadoop-charts {
    float: left;
    // border: 1px solid silver;
    // box-sizing: border-box;
  }
  &::after {
    content: "";
    display: block;
    clear: both;
  }
}

@media screen and (max-width: 1745px) {
  .hadoop {
    .hadoop-table {
      width: 100%;
    }
    .hadoop-charts {
      width: 100%;
      position: relative;
      #hadoopCharts {
        position: absolute;
        left: 50%;
        margin-left: -405px;
      }
    }
  }
}
</style>




